// https://www.npmjs.com/package/react-bscroll
// http://ustbhuangyi.github.io/better-scroll/doc/zh-hans/#better-scroll%20%E6%98%AF%E4%BB%80%E4%B9%88
import React, { Component } from 'react';
// 根据文件相对路径引入
import Scroll from 'react-bscroll';
import 'react-bscroll/lib/react-scroll.css';
import Http from '../../axios/http';
import API from '../../api/index';
import './index.scss';


class PullupScrollPage extends Component {
    constructor(props, context) {
        super(props, context)
        this.state = {
            pageNum: 1,
            pageRows: 9,
            imgGrid: []
        }
    }

    componentWillMount() {
        this.pullDownFreshAction();
    }

    componentWillUnmount() {
        clearTimeout(this.timer)
    }
    pullDownFreshAction = () => {
        // debugger;
        this.setState({
            pageNum: 1
        })
        return new Promise((resolve) => {
            this.timer = setTimeout(() => {
                if (Math.random() > 0) {
                    this.getUpDownRefresh(this.state.pageNum, this.state.pageRows, 1);
                }
                resolve()
            }, 1000)
        })
    }
    loadMoreData = () => {
        this.setState({
            pageNum: this.state.pageNum + 1
        })
        // 更新数据
        return new Promise(resolve => {
            this.timer = setTimeout(() => {
                if (Math.random() > 0) {
                    this.getUpDownRefresh(this.state.pageNum, this.state.pageRows, 2);
                }
                resolve()
            }, 1000)
        })
    }
    /**
     * 
     * @param {*} page 页码
     * @param {*} rows 一页显示几条
     * @param {*} type 1刷新 2加载更多
     */
    getUpDownRefresh(page, rows, type) {
        Http.post(API.GET_PAGELIST, {
            page: page,
            rows: rows
        }).then(res => {
            if (type == 1) {
                this.setState({
                    imgGrid: res.rows
                })
            } else {
                this.setState({
                    imgGrid: [...this.state.imgGrid, ...res.rows]
                })
            }

        })
    }
    clickItem(item) {
        console.log('clickEvent', item)
    }
    render() {
        return (
            <div>
                <div className="container">
                    <Scroll
                        pullUpLoad
                        pullDownRefresh
                        doPullDownFresh={this.pullDownFreshAction}
                        pullUpLoadMoreData={this.loadMoreData}
                        isPullUpTipHide={false}
                    >
                        <ul className="img-box">
                            {this.state.imgGrid.map((item, index) =>
                                (<li className="img-box-item"
                                    style={{ width: '100%', height: '50px', marginTop: '10px' }}
                                    key={index}
                                    onClick={this.clickItem.bind(this, item)}
                                >
                                    <img src={`${window.location.protocol}//${window.location.hostname}:3000/${item.logo}`} alt="" />
                                </li>)
                            )}
                        </ul>
                    </Scroll>
                </div>
            </div>
        )
    }
}

export default PullupScrollPage;